Chart.js

#パフォーマンス

Chart.js チャートは次のようにレンダリングされます。canvas要素を使用すると、レンダリングが非常に高速になります。大規模なデータセットまたはパフォーマンスを重視するアプリケーションの場合は、以下のヒントを検討してください。

#データ構造とフォーマット

#解析中

準備されたデータをデータセットとスケールで受け入れられる内部形式で提供し、設定しますparsing: false。見るデータ構造詳細については。

#データの正規化

Chart.js は、データセット間で一意で並べ替えられ、一貫性のあるインデックスをデータに提供し、normalized: trueこれを実行したことを Chart.js に知らせるオプション。このオプションを使用しない場合でも、並べ替えられたデータを提供する方が高速な場合があります。

#デシメーション

データを間引くと最良の結果が得られます。グラフに表示するデータが大量にある場合、幅がわずか数百ピクセルのグラフに数万のデータ ポイントを表示しても意味がありません。

のデシメーションプラグイン折れ線グラフで使用すると、グラフが表示される前にデータを間引くことができます。これにより、チャートのレンダリングに必要なメモリが削減されるため、最高のパフォーマンスが得られます。

折れ線グラフでできること描画中の自動データ間引き、特定の条件が満たされた場合。自動デシメーションはチャートのライフサイクルの後半で行われるため、最大のパフォーマンスを得るために、データを渡す前に自分でデータをデシメートすることを検討する必要があります。

#ティックの計算

#回転

回転値を指定する設定することによりminRotationとmaxRotationこれにより、チャートが使用する値を自動的に決定する必要がなくなります。

#サンプリング

をセットするticks.sampleSizeオプション。これにより、軸をより迅速にレンダリングするために、ラベルのサブセットのみを確認してラベルの大きさが決定されます。これは、ラベルのサイズに大きな差異がない場合に最適に機能します。

#アニメーションを無効にする

チャートのレンダリング時間が長い場合は、アニメーションを無効にすることをお勧めします。そうすることで、更新中にグラフを複数回表示するのではなく、1 回だけ表示するだけで済むことになります。これにより、CPU 使用率が削減され、一般的なページのパフォーマンスが向上します。 アニメーションが無効で Path2D が使用可能な場合、折れ線グラフは Path2D キャッシュを使用します。

アニメーションを無効にするには

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: false
    }
});

#特定minとmax秤用

を指定すると、minとmaxの場合、スケールはデータから範囲を計算する必要はありません。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                min: new Date('2019-01-01').valueOf(),
                max: new Date('2019-12-31').valueOf()
            },
            y: {
                type: 'linear',
                min: 0,
                max: 100
            }
        }
    }
});

#Web ワーカーによる並列レンダリング (Chromium のみ)

Chromium (Chrome: バージョン 69、Edge: 79、Opera: 56) には、次の機能が追加されました。キャンバスのレンダリング制御を転送する (新しいウィンドウが開きます)ウェブワーカーへ。 Web ワーカーが使用できるのは、OffscreenCanvas API (新しいウィンドウが開きます)Web ワーカーから DOM 内のキャンバスにレンダリングします。 Chart.js はキャンバスベースのライブラリであり、Web ワーカーでのレンダリングをサポートしています。Canvas 要素の代わりに OffscreenCanvas を Chart コンストラクターに渡すだけです。現時点では、この API は Chromium ベースのブラウザでのみサポートされていることに注意してください。

すべての Chart.js 計算を別のスレッドに移動すると、メイン スレッドを他の用途に解放できます。 Web ワーカーで Chart.js を使用する場合のヒントとテクニック:

  • スレッド間でのデータ転送はコストがかかる可能性があるため、構成オブジェクトとデータ オブジェクトをできるだけ小さくするようにしてください。可能であれば、ワーカー側でそれらを生成してみてください (ワーカーは HTTP リクエストを行うことができます!)。または、それらを ArrayBuffers としてワーカーに渡して、あるスレッドから別のスレッドにすばやく転送できるようにしてください。
  • スレッド間で関数を転送することはできないため、構成オブジェクトに関数が含まれている場合は、転送する前に関数を削除し、後で追加し直す必要があります。
  • ワーカー スレッドから DOM にアクセスできないため、DOM を使用する Chart.js プラグイン (マウス操作を含む) は機能しない可能性があります。
  • 最新の Chromium ブラウザ以外のブラウザをサポートしている場合は、フォールバックがあることを確認してください。
  • チャートのサイズ変更は手動で行う必要があります。以下のワーカー コードの例を参照してください。

メインスレッドコードの例:

const config = {};
const canvas = new HTMLCanvasElement();
const offscreenCanvas = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({canvas: offscreenCanvas, config}, [offscreenCanvas]);

ワーカーコードの例、worker.js:

onmessage = function(event) {
    const {canvas, config} = event.data;
    const chart = new Chart(canvas, config);
    // Resizing the chart must be done manually, since OffscreenCanvas does not include event listeners.
    canvas.width = 100;
    canvas.height = 100;
    chart.resize();
};

#折れ線グラフ

#ベジェ曲線は無効のままにしておきます

チャート上に線を描画している場合、ベジェ曲線よりも直線を描画する方がパフォーマンスが高いため、ベジェ曲線を無効にするとレンダリング時間が短縮されます。ベジェ曲線はデフォルトでは無効になっています。

#描画中の自動データ間引き

行要素は、次の場合にデータを自動的に間引きます。tension、stepped、 とborderDashデフォルト値に設定されたままになります (false、0、 と[]それぞれ）。これにより、目に見えない線分の描画がスキップされるため、レンダリング速度が向上します。

#スパンギャップを有効にする

多くのデータ ポイントがある場合は、有効にすることでパフォーマンスが向上する可能性があります。spanGaps。これにより、ラインのセグメント化が無効になりますが、これは不要な手順となる可能性があります。

有効にするspanGaps:

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            spanGaps: true // enable for a single dataset
        }]
    },
    options: {
        spanGaps: true // enable for all datasets
    }
});

#線画を無効にする

多数のデータ ポイントがある場合は、データセットのラインのレンダリングを無効にして、ポイントのみを描画する方がパフォーマンスが向上する可能性があります。これを行うと、キャンバス上に描画するものが少なくなり、レンダリングのパフォーマンスが向上します。

回線を無効にするには:

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false // disable for a single dataset
        }]
    },
    options: {
        showLine: false // disable for all datasets
    }
});

#点描画を無効にする

多数のデータ ポイントがある場合は、データセットのポイントのレンダリングを無効にして、線のみを描画する方がパフォーマンスが向上する可能性があります。これを行うと、キャンバス上に描画するものが少なくなり、レンダリングのパフォーマンスが向上します。

点の描画を無効にするには:

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            pointRadius: 0 // disable for a single dataset
        }]
    },
    options: {
        datasets: {
            line: {
                pointRadius: 0 // disable for all `'line'` datasets
            }
        },
        elements: {
            point: {
                radius: 0 // default to disabled in all datasets
            }
        }
    }
});

#Babel でトランスパイルする場合は、次の使用を検討してください。looseモード

Babel 7.9 では、クラスの構築方法が変更されました。と一緒に使用しないと遅いですlooseモード。詳しくは (新しいウィンドウが開きます)

最終更新： 2023 年 5 月 25 日、午後 1 時 12 分 28 秒

←パディング 構成→